import React from 'react'
import {View, Text, Image, ScrollView, Button, Input, Swiper, SwiperItem} from '@tarojs/components'
import useNavBarInfo from '@/hook/useNavBarInfo'
import './index.scss'
import Taro from "@tarojs/taro";

// 轮播
const MySwiper = ({ images }: { images: string[] }) => (
  <Swiper
    indicatorDots
    autoplay
    interval={3000}
    circular
  >
    {images.map((src, index) => (
      <SwiperItem  key={index}>
        <Image  src={src} mode="aspectFill" style={{ width: '100%' , height: '100%' }}  />
      </SwiperItem>
    ))}
  </Swiper>
);
const AppraisalDetail = () => {
  const navBarInfo = useNavBarInfo()
  const handleBack = () => {
    const pages = Taro.getCurrentPages()
    if (pages.length > 1) {
      Taro.navigateBack()
    } else {
      Taro.reLaunch({ url: '/pages/index/index' })
    }
  }

  const imageList = [
    'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
    'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
    'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
    'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg'
  ];
  return (
    <View className="appraisal-detail" style={{ display: 'flex', flexDirection: 'column' }}>
      <View
        className="user-bar"
        style={{
          paddingTop: `${navBarInfo.statusBarHeightRpx - 30}rpx`,
          height: `${navBarInfo.totalHeightRpx}rpx`,
          flexShrink: 0,
          position: 'fixed',
          top: 0,
          left: 0,
          width: '100%',
          zIndex: 999,
          backgroundColor: '#F0F0F0',
          display: 'flex',
          alignItems: 'center',
          paddingLeft: '24rpx',
          paddingRight: '24rpx',
          boxSizing: 'border-box'
        }}
      >
        <View className="back-box" >
          <View className="user">
            <View className="nav-back" onClick={handleBack}>
              <Image
                src={require('@/assets/back.png')}
                className="back-icon"
              />
            </View>
            <Image className="avatar" src={require(`../../assets/photo.png`)} ></Image>
            <View className="user-info">
              <Text className="nickname">鉴酒大师</Text>
              <Text className="time-place">25分之前</Text>
            </View>
          </View>
          <Image className="like" src={require(`../../assets/video/hearts-line.png`)} ></Image>
        </View>
      </View>
      <View style={{marginTop: `${navBarInfo.totalHeightRpx}rpx`,padding: '20rpx 30rpx'}}>
        <View className="text-details-swiper">
          <MySwiper images={imageList} />
        </View>
        <View className="box">
          <View className="content">
            <View className="title-box">
              <View className="title">白酒鉴别系列文案</View>
              <Image className="share" src={require(`../../assets/video/share.png`)} ></Image>
            </View>
            <View className="dsc">海伟酒类交易市场汇集了法国、意大利、澳大利亚、智利、巴 西、南非、西班牙等各国酒类产品，品种系列化、多样化，适 合不同消费者的</View>
          </View>
          <View className="comment-num">共 123 条评论</View>
          <View className="comment-box">
            <View className="comment-item">
              <View className="avatar-box">
                <Image className="avatar" src={require(`../../assets/photo.png`)} ></Image>
                <View className="name-box">
                  <View className="name">鉴酒大师</View>
                  <View className="comment">说的很好，有点意思</View>
                </View>
              </View>
              <View className="time">
                25分之前
              </View>
              <Image className="hearts" src={require(`../../assets/video/hearts-line.png`)} ></Image>
            </View>
            <View className="comment-item">
              <View className="avatar-box">
                <Image className="avatar" src={require(`../../assets/photo.png`)} ></Image>
                <View className="name-box">
                  <View className="name">鉴酒大师</View>
                  <View className="comment">说的很好，有点意思</View>
                </View>
              </View>
              <View className="time">
                25分之前
              </View>
              <Image className="hearts" src={require(`../../assets/video/hearts-line.png`)} ></Image>
            </View>
          </View>
        </View>
      </View>

      <View className="bottom-bar">
        <View className="input-box">
          <Image className="input-img" src={require(`../../assets/video/write.png`)} ></Image>
          <Input className="input" placeholder="说说你的想法..."> </Input>
        </View>
        <View className="action-box">
          <View className="action-item">
            <Image className="icon" src={require('../../assets/video/hearts-line.png')}></Image>
            <Text className="count">111</Text>
          </View>
          <View className="action-item">
            <Image className="icon" src={require('../../assets/video/comment2.png')}></Image>
            <Text className="count">222</Text>
          </View>
          <View className="action-item">
            <Image className="icon" src={require('../../assets/video/active-collect.png')}></Image>
            <Text className="count">333</Text>
          </View>
        </View>
      </View>
    </View>
  )
}

export default AppraisalDetail
